<!--
*@Author: zt
*@Description: 我的考勤
*@Date: 2024-08-26
-->
<template>
  <a-layout class="f-h-100">
    <u-collapsed-sider
      :canExpand="false"
      width="50%"
      style="border: none">
      <a-layout
        class="f-h-100"
        style="background: #f0f2f5">
        <u-table-header
          class="f-margin-b16"
          style="padding: 0; background: unset">
          <Applcant
            @success="getMyApplicant()"
            :column="3" />
        </u-table-header>
        <u-table-content style="border-radius: 16px">
          <MyAllApplicant
            ref="myAllApplicantRef"
            :isFast="true" />
        </u-table-content>
      </a-layout>
    </u-collapsed-sider>

    <u-table-content
      class="f-margin-l16"
      style="padding: 0">
      <a-layout
        class="f-h-100"
        style="background: #f0f2f5">
        <u-table-header
          class="f-margin-b16"
          style="padding: 0; background: unset">
          <MyVacation title="我的考勤" />
        </u-table-header>
        <u-table-content style="position: relative; border-radius: 16px">
          <span class="u-kqrl-title">考勤日历</span>
          <CalenderC
            :showExtraTool="false"
            v-model:date="clickDateValue"
            :showViewYear="false"
            @itemClick="itemClick"
            toolJustify="end"
            :extraLessH="12"
            :data="dateList"
            @getSearch=""
            class="u-checkin-calendar"
            style="border-radius: 16px; padding: 0 2px; background: #fff" />
        </u-table-content>
      </a-layout>
    </u-table-content>
  </a-layout>

  <!-- 考勤编辑 -->
  <VacatEdit
    v-model:open="showEdit"
    :busiType="busiType"
    :keyid="keyid"
    :formDisabled="formDisabled"
    @success="getMyApplicant(), (showEdit = false)"
    wrap-class-name="full-modal" />
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch, onActivated } from "vue";
import { useRoute, useRouter, onBeforeRouteUpdate, onBeforeRouteLeave } from "vue-router";
import { _IFormEl } from "@/components/common/form/interface";
import { ColProps, FormItemProps, TableColumnProps } from "ant-design-vue";
import { CheckCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { numberC } from "@/util/common";
import { formatAmt } from "@/util/format.ts";
import { cloneDeep } from "lodash";
import dayjs from "dayjs";
import MyVacation from "./MyVacation.vue";
import CalenderC from "@/views/oa/assist/myCalender/Calender.vue";
import Applcant from "./ApplicantCard.vue";
import VacatEdit from "./VacatEdit.vue";
import MyAllApplicant from "./MyAllApplicant.vue";
import * as myCheckInApi from "@/service/personnel/myCheckIn/index";

const route = useRoute();
const router = useRouter();

// 打开编辑
let showEdit = ref<boolean>(false);
let busiType = ref<string>("");
const clickDateValue = ref<Dayjs>();
const myAllApplicantRef = ref();

let dateList = ref([]);

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
});
const searchF = reactive({
  model: {
    pageStatus: 1,
  },
});

// 获取我的申请数据
const getMyApplicant = async () => {
  try {
    myAllApplicantRef.value.getSearch();
    
    // 审核完成数据日程数据
    let tform1 = cloneDeep(searchF);
    tform1.model.status = 3;
    const result = await myCheckInApi.page({ ...pagenation, ...tform1 });
  
    if (result.code == 0) {
      let newArr = [];
      result.data.records.map((e) => {
        if (e.status == 3) {
          newArr.push(e);
        }
      });
  
      formatScheduleData(newArr);
    }
  } catch (error) {
    console.log("🚀 ~ getMyApplicant ~ error:", error)
  }
};

/**
 *@Author: QWP
 *@Description: 格式化日程数据
 *@Date 2024-08-27 14:09
 */
const formatScheduleData = (data: any[]) => {
  const applicanttypes = {
    1: "加班",
    2: "请假",
    3: "离驻地",
  };
  const typeColor = {
    1: "#52c41a",
    2: "",
    3: "#fa8c16",
  };
  const typeBgColor = {
    1: "rgb(82, 196, 26, .2)",
    2: "",
    3: "rgb(250, 140, 22, .2)",
  };
  dateList.value = [];

  // 将区间数据生成每天的日程数据
  for (let i = 0; i < data.length; i++) {
    const { endstart, startdate, applicanttype } = data[i];
    let minDate = dayjs(Math.min(dayjs(startdate), dayjs(startdate))).format("YYYY-MM-DD");
    let maxDate = dayjs(Math.max(dayjs(endstart), dayjs(endstart))).format("YYYY-MM-DD");
    const day = dayjs(maxDate).diff(dayjs(minDate), "day") + 1;
    for (let d = 0; d < day; d++) {
      dateList.value.push({
        scheduledate: dayjs(minDate).add(d, "day").format("YYYY-MM-DD HH:mm:ss"),
        ...data[i],
        color: typeColor[applicanttype],
        bgColor: typeBgColor[applicanttype],
        theme: applicanttypes[applicanttype],
      });
    }
  }
};

// 考勤日历数据
let keyid = ref("");
let formDisabled = ref(false);
//点击查看详情
const clickEdit = async (item) => {
  keyid.value = item.keyid;
  busiType.value = item.applicanttype;
  if (item.status == 3 || item.status == 2) {
    formDisabled.value = true;
  } else {
    formDisabled.value = false;
  }
  showEdit.value = true;
};
const itemClick = (data: any) => {
  keyid.value = data.keyid;
  busiType.value = data.applicanttype;
  if (data.status == 3 || data.status == 2) {
    formDisabled.value = true;
  } else {
    formDisabled.value = false;
  }
  showEdit.value = true;
};

const goPush = () => {
  router.push({
    path: "/TransitIndex/MyCheckInExamineInquire",
    query: {
      _tab: "1",
    },
  });
};
onMounted(async () => {
  // await getMyApplicant();
  //  await getCheckInDateData()
});

onActivated(async () => {
  await getMyApplicant();
});
</script>

<style lang="scss" scoped>
.u-tx-bg {
  background-color: #e7f4ff !important;
}

.u-bq-bg {
  background-color: #fdead6 !important;
  border-color: #fa8c16 !important;
}

.u-kqrl-title {
  position: absolute;
  top: 16px;
  left: 18px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  color: #303133;
}

.u-myapplicant-item {
  padding-left: 10px;
  border-left: 3px solid #1890ff;
}

.u-checkin-calendar {
  .u-custome-calender-cell {
    padding-bottom: 0px !important;
  }
}
</style>
